<template>
    <div class="w-full overflow-scroll" style="background-color: var(--boxborder);">
        <div class="w-full h-20 flex justify-center">
            <p class="text-xl leading-[5rem] ">当前播放列表</p>
        </div>
        <div>
            <div class="flex justify-between h-12 leading-[3.5rem] border-y-[1px] border-gray-500">
                <div class="w-[35%]">
                    <p class="pl-8"><a>名称</a></p>
                </div>
                <div class="w-[34%]">
                    <p>专辑</p>
                </div>
                <div class="w-[20%]">
                    <p>艺术家</p>
                </div>
                <div class="w-[11%]">
                    <p>时长</p>
                </div>
            </div>
            <div v-for="item, index in store?.playList" :key="index"
                class="flex justify-between h-14 leading-[3.5rem] px-2 hover:bg-orange-100   text-gray-500 overflow-hidden text-ellipsis text-sm">
                <div class="flex w-[35%]">
                    <p class="w-6">{{ index + 1 }}</p>
                    <img :src="item.cover" alt="封面" class="h-10 w-10 mx-0 my-auto  rounded-sm">
                    <p> &emsp;{{ item.name }}</p>
                </div>
                <p class="w-[35%]">{{ item.album }}</p>
                <div class="w-[20%]">
                    <p>{{ item.singer }}</p>
                </div>
                <p class="w-[10%]" @click="changeIndex(index)">{{ setTime(item.dt.toString()) }} <i
                        class="iconfont  text-2xl  icon-volume ml-4 text-red-500" v-if="item.id
                            === store.currentId" title="正在播放"></i>
                </p>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { setTime } from '~~/hook/format';
import { usePlayStore } from '~~/store';
const store = usePlayStore();
function changeIndex(index: number) {
    if (index !== store.currentMusicIndex) {
        store.$patch(() => {
            store.playStatus = true;
            store.currentMusicIndex = index;
            store.currentId = store.playList[index].id
        })
    }
}

</script>